<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <!-- 这一条用于移动端更好的预览设置，进行缩放比例 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>博客发布</title>
  <!-- Bootstrap css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Semmanticui css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

  <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.css"/>

  <!-- 引入自定义css样式 -->
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body class="qt-bj">




<!-- 导航标签 这个Semmantic-Ui框架有一些导航，写上对应类标签就可以啦-->
<!-- inverted加上这个导航背景就变成黑色（颜色翻转的意思）
     attached没有圆角
     m-padded-tb-mini自己写的css样式类选择器
     secondary里面的每个容器都包裹文字
     stackable当屏幕缩小的时候，导航变成下拉式,堆叠在一块-->
<nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
  <div class="ui container"><!-- container是一个一个容器来放 -->
    <div class="ui inverted secondary stackable menu">


      <!-- 导航左边,m-item移动端的时候隐藏 -->
      <h2 class="ui teal header item">后台管理</h2>
      <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;博客</a><!-- icom都是图标，官方文档里面有 -->
      <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>


     <!-- 右边头像 -->
      <div class="right m-item m-mobile-hide menu">
        <!-- item自适应居中 -->
        <!-- dropdown是bootstrap的组件，头像下拉框组件 -->
        <div class="dropdown item">
          <img class="ui avatar image" src="http://i2.tiimg.com/724771/7aafc5cff55c9351.jpg">
          <button class="btn btn-default dropdown-toggle m-zdys" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            一个人的~
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#" th:href="@{/admin/logout}">注销</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出</a></li>
          </ul>
        </div>
      </div>


    </div>
  </div>


  <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
  <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
    <i class="sidebar icon"></i><!-- 面包样式 -->
  </a>
</nav>


<!-- 二级导航 -->
<div class="ui attached pointing menu">
  <div class="ui container">
    <div class="right menu">
      <a href="#"  class="active teal item">发布</a>
      <a href="#" th:href="@{/admin/blogs}" class=" item">列表</a>
    </div>
  </div>
</div>









<!--中间内容,左右布局
    m-padded-tb-large控制上下内边距-->
<!--中间内容-->
<!--中间内容-->
<div  class="m-container m-padded-tb-big">
  <div class="ui container">

    <!-- 也是中间所有内容form,blog-form对应下面script的published为真还是false -->
    <form id="blog-form" action="#"  method="post" class="ui form" th:action="@{/admin/blogs1}">

      <!-- 这里用个hidden隐含域，当点击保存的时候published就为假false，点击发布published就为真true -->
      <input type="hidden" name="published"><!-- 是点击的保存还是发布 -->

      <!-- 定义一个hidden隐含域，用来修改（共同一个页面） -->
<input type="hidden" name="id" th:value="${id!=null?blog.id:''}">

      <!-- 原创那一行,required必须输入 -->
      <div class="required field">
        <div class="ui left labeled input">
          <div class="ui selection compact teal basic dropdown label">
            <!-- 这里也要用了隐含域name="flag" -->
            <input type="hidden" name="flag" th:value="${id!=null?blog.flag:''}" >
            <i class="dropdown icon"></i>
            <div class="text">原创</div>
            <div class="menu">
              <div class="item" data-value="原创">原创</div>
              <div class="item" data-value="转载">转载</div>
              <div class="item" data-value="翻译">翻译</div>
            </div>
          </div>
          <!-- 根据这个name属性的值在script里面设置好的报错信息 -->
          <input type="text" name="title" placeholder="标题" th:value="${id!=null?blog.title:''}">
        </div>
      </div><!-- 原创结束 -->


      <!-- 文本编辑器 -->
      <div class="required field">
        <div id="md-content" style="z-index: 1 !important;">
          <textarea placeholder="博客内容" name="content" style="display: none" th:text="${id!=null?blog.content:''}"></textarea>
        </div>

      </div>


      <!-- 分类和标签 -->
      <div class="two fields">
        <div class="required field">
          <div class="ui left labeled action input">
            <label class="ui compact teal basic label">分类</label>
            <div class="ui fluid selection dropdown">
              <input type="hidden" name="type.id" th:value="${id!=null?blog.type.id:''}">
              <i class="dropdown icon"></i>
              <div class="default text">分类</div>
              <div class="menu">
                <div th:each="type : ${types}" th:text="${type.name}" th:data-value="${type.id}" class="item" data-value="1" >错误日志</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 标签选择 -->
        <div class=" field">
          <div class="ui left labeled action input">
            <label class="ui compact teal basic label">标签</label>
            <div class="ui fluid selection multiple search  dropdown">
              <input type="hidden" name="tagIds" th:value="${id!=null?blog.tagIds:''}" >
              <i class="dropdown icon"></i>
              <div class="default text">标签</div>
              <div class="menu">
                <div th:each="tag : ${tags}" th:text="${tag.name}" th:data-value="${tag.id}" class="item" data-value="1" >java</div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- 分类标签结束 -->


      <!-- 首图哪一行 -->
      <div class="required field">
        <div class="ui left labeled input">
          <label class="ui teal basic label">首图</label>
          <input type="text" name="firstPicture"  placeholder="首图引用地址" th:value="${id!=null?blog.firstPicture:''}">
        </div>
      </div>


      <!-- 博客描述多行文本域 -->
      <div class="required field">
          <textarea name="description"  placeholder="博客描述..." maxlength="200" th:text="${id!=null?blog.description:''}"></textarea>
      </div>


      <!-- 推荐，转载声明等等选择行 -->
      <div class="inline fields">
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="recommend" name="recommend" checked th:checked="${id!=null?blog.recommend:''}" class="hidden">
            <label for="recommend">推荐</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="shareStatement" name="shareStatement" th:checked="${id!=null?blog.shareStatement:''}" class="hidden">
            <label for="shareStatement">转载声明</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="appreciation" name="appreciation" th:checked="${id!=null?blog.appreciation:''}" class="hidden">
            <label for="appreciation">赞赏</label>
          </div>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="commentabled" name="commentabled" th:checked="${id!=null?blog.commentabled:''}" class="hidden">
            <label for="commentabled">评论</label>
          </div>
        </div>
      </div>


      <!-- 如果点击发布或者保存按钮，但是用户没有输入添加信息的话，就弹出这个报错信息 -->
      <!-- 这个error message报错信息在下面的script -->
      <div th:text="${message}" class="ui error message">提交失败</div>


      <!-- 3个按钮 -->
      <div class="ui right aligned container">
        <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
        <button type="button" id="save-btn" class="ui secondary button">保存</button>
        <button type="button" id="publish-btn" class="ui teal button">发布</button>
      </div>

    </form>
  </div>
</div>

<br>
<br>












<!-- 底部 -->
<!-- m-padded-tb-mini自定义样式标签设置间隔 -->
<footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
  <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


    <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
    <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
    <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
      <!-- 占几份直接用英文的数字 -->


      <!-- 第一个格子 -->
      <div class="four wide column"><!-- four4份 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <div class="item"><!-- item居中对齐 -->
            <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
            <img src="../../static/images/haoyou.png" class="ui rounded image ewm-dx" alt="" >
          </div>
        </div>
      </div>


      <!-- 第二个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
        </div>
      </div>


      <!-- 第三个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">Email: 2247605840@qq.com</a>
          <a href="#" class="item">QQ: 2247605840</a>
          <a href="#" class="item">微信: xinyikuoai</a>
        </div>
      </div>


      <!-- 第四个格子 -->
      <div class="six wide column"><!-- seven7份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
        <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
      </div>
    </div>


    <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



  </div><!-- 最外面的容器container -->
</footer>























<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<!-- 因为Semmantic-UI框架要依赖jquery包 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.min.js" ></script>
<!--/*/</th:block>/*/-->
<script>
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });

  $('.ui.dropdown').dropdown({
    on : 'hover'
  });


  //初始化Markdown编辑器
  var contentEditor;
  $(function() {
    contentEditor = editormd("md-content", {
      width   : "100%",
      height  : 640,
      syncScrolling : "single",
     //   path    : "../../static/lib/editormd/lib/"
      path    : "/lib/editormd/lib/"
    });
  });



  //这些用来后端传递数据的
  $('.ui.form').form({
    fields : {
      title : {
        identifier: 'title',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type : 'empty',
          prompt: '标题：请输入博客标题'
        }]
      },
      content : {
        identifier: 'content',
        rules: [{
          type : 'empty',
          prompt: '标题：请输入博客内容'
        }]
      },
      typeId : {
        identifier: 'type.id',
        rules: [{
          type : 'empty',
          prompt: '标题：请输入博客分类'
        }]
      },
      firstPicture : {
        identifier: 'firstPicture',
        rules: [{
          type : 'empty',
          prompt: '标题：请输入博客首图'
        }]
      },
      description : {
        identifier: 'description',
        rules: [{
          type : 'empty',
          prompt: '标题：请输入博客描述'
        }]
      }
    }
  });




//这两个是用来控制是否发布的，当点击保存，就给published这个属性为false，发布就给true
  $('#save-btn').click(function () {
    $('[name="published"]').val(false);
    $('#blog-form').submit();//提交哪一个form（就在那里一个form写上id为blog-form）
  });


  $('#publish-btn').click(function () {
    $('[name="published"]').val(true);
    $('#blog-form').submit();
  });



</script>
</body>
</html>